<template>
  <div class="app-container">
    <div class="messages">
      <div v-if="isShow" class="filter-container">
        <div class="filter-content">
          <div class="searchif">
            <el-row>
              <el-col :span="8">
                <div class="search-item">
                  <label>消息编号：</label>
                  <el-input
                    v-model="query.informationNumber"
                    clearable
                    placeholder="请输入消息编号"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>消息标题：</label>
                  <el-input
                    v-model="query.informationTitle"
                    clearable
                    placeholder="请输入消息标题"
                  />
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>发送时间：</label>
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="search-item">
                  <label>发送规则：</label>
                  <el-select v-model="query.assetTypeId" placeholder="请选择发送规则" clearable>
                    <el-option label="定时发送" value="1" />
                    <el-option label="立即发送" value="2" />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="search-item">
                  <label>通知渠道：</label>
                  <el-select v-model="query.assetTypeId" placeholder="请选择通知渠道" clearable>
                    <el-option label="站内通知" value="1" />
                    <!-- <el-option label="立即发送" value="2" /> -->
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="btngroup">
            <el-button
              class="filter-item redBtn"
              icon="el-icon-search"
              type="primary"
              size="mini"
              @click="searchMessage"
            >
              查询
            </el-button>
          </div>
        </div>
      </div>
      <div v-if="isShow" class="input-message">
        <div class="addBox">
          <el-button class="addNews" type="danger" size="mini" @click="addMessage">
            <b>+</b>
            新增消息
          </el-button>
        </div>
        <div class="messageTable">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            max-height="550"
          >
            <el-table-column align="center" label="消息编号">
              <template slot-scope="scope">
                {{ scope.row.informationNumber }}
              </template>
            </el-table-column>

            <el-table-column label="通知渠道" align="center">
              <template slot-scope="scope">
                {{ scope.row.informChannel | retype }}
              </template>
            </el-table-column>
            <el-table-column label="发送规则" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sendRule | reRules }}</span>
              </template>
            </el-table-column>
            <el-table-column label="消息标题" align="center">
              <template slot-scope="scope">
                {{ scope.row.informationTitle }}
              </template>
            </el-table-column>
            <el-table-column
              class-name="status-col"
              width="140"
              label="消息内容"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.informationContent }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="发送时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | getNewTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="160px" class="setBtns">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  class="upStr"
                  @click="updateMessage(scope.row.id)"
                >
                  修改
                </el-link>
                <span class="line">|</span>
                <el-link
                  type="danger"
                  :underline="false"
                  class="upStr redBtn"
                  @click="deleteMessage(scope.row.id)"
                >
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          :total="total"
          layout="total, prev, pager, next, jumper"
          :current-page="paging.pageNo"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog title="删除消息" :visible.sync="dialogVisibleDelete" width="30%">
      <span>
        <i class="el-icon-warning" />
        删除后，未发送的消息将不会进行发送
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisibleDelete = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="delInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getMessageList, DeleteOne } from '@/api/message/index'
  export default {
    filters: {
      retype(val) {
        if (val === '1') {
          return ''
        }
      },
      reRule(val) {
        if (val === '1') {
          return '立即发送'
        } else {
          return '定时发送'
        }
      },
      getNewTime(value) {
        if (typeof value === 'undefined') {
          return ''
        } else {
          const date = new Date(parseInt(value))
          const y = date.getFullYear()
          let MM = date.getMonth() + 1
          MM = MM < 10 ? '0' + MM : MM
          let d = date.getDate()
          d = d < 10 ? '0' + d : d
          let h = date.getHours()
          h = h < 10 ? '0' + h : h
          let m = date.getMinutes()
          m = m < 10 ? '0' + m : m
          let s = date.getSeconds()
          s = s < 10 ? '0' + s : s
          return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
        }
      },
    },
    data() {
      return {
        listLoading: true,
        query: {
          informationNumber: '',
          informationTitle: '',
        },
        paging: {
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        dialogVisibleDelete: false,
        currentPage: 2,
        radio: '1',
        isShow: true,
        isShowAdd: false,
        showItem: true, // 是否展开
        list: [],
        DeleteOneId: '',
      }
    },
    computed: {
      word: function () {
        if (this.showItem === false) {
          return '展开'
        } else {
          return '收起'
        }
      },
    },
    mounted() {
      /**
       * 收起搜索
       */
      this.$nextTick(function () {
        this.getList()
      })
    },
    methods: {
      getList() {
        getMessageList({ informationVo: { ...this.query }, ...this.paging }).then(response => {
          this.listLoading = false
          this.list = response.records
          this.paging.pageNo = response.pageNo
          this.paging.pageSize = response.pageSize
          this.total = response.total
        })
      },
      // 添加消息
      addMessage() {
        this.$router.push({ path: '/smartParkFront/addMessage' })
      },
      // 修改消息
      updateMessage(val) {
        this.$router.push({ path: '/smartParkFront/upMessage', query: { id: val } })
      },
      handleSizeChange(val) {
        this.paging.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.paging.pageNo = val
        this.getList()
      },
      // 查询消息
      searchMessage() {
        this.getList()
      },
      // 重置消息
      refreshMessage() {
        this.query = this.$options.data().query
        this.getList()
      },
      // 删除消息
      deleteMessage(id) {
        this.DeleteOneId = id
        this.dialogVisibleDelete = true
      },
      delInfo() {
        this.dialogVisibleDelete = false
        // eslint-disable-next-line no-undef
        DeleteOne({ informationId: `${this.DeleteOneId}` }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getList()
          this.DeleteOneId = ''
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
    // background: #F3F4F8
    padding: 20px;
  }

  /* .input-message{
  position: relative;
} */
  .cell {
    .el-link.el-link--primary {
      color: #409eff;
    }

    .el-link.el-link--primary:hover {
      color: #40afff;
    }

    .el-link.el-link--danger {
      color: #d12f1f;
    }

    .el-link.el-link--danger:hover {
      color: #e23f1f;
    }

    .upStr {
      width: 46px;
      text-align: center;
    }

    .line {
      width: 20px;
      color: #aaa;
      text-align: center;
    }
  }

  .filter-container {
    position: relative;

    .filter-item {
      display: inline-block;
      min-width: 65px;
      padding: 5px 10px;
      margin-bottom: 10px;
      vertical-align: middle;
      border: none;
    }

    .reset-item {
      display: inline-block;
      min-width: 65px;
      padding: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      color: #333;
      vertical-align: middle;
      background: none;
      border: 1px solid #ddd;
    }

    .dropdown-item {
      display: inline-block;
      min-width: 65px;
      margin-bottom: 10px;
      vertical-align: middle;
    }

    &::before {
      position: relative;
      display: block;
      width: 10px;
      height: 42px;
      content: '';
    }

    .filter-content {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      display: flex;
      background: #fff;

      &.border-bottom {
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      }

      div {
        flex: 1 1;

        &.searchif {
          position: relative;
          padding-right: 20px;
          overflow: hidden;

          .moreico {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
          }

          &.height {
            height: 46px;
          }

          .search-item {
            display: inline-block;
            display: flex;
            padding-left: 10px;
            font-size: 14px;
            color: #333;
            justify-content: center;

            label {
              display: inline-block;
              margin-bottom: 10px;
              font-weight: normal;
              line-height: 36px;
              text-align: right;
              vertical-align: middle;
            }

            .el-input__inner {
              height: 32px;
              line-height: 32px;
            }

            & > span {
              flex: 1;
            }
          }
        }

        &.btngroup {
          display: flex;
          height: 42px;
          text-align: right;
          flex: 0 0 210px;
          align-content: flex-end;
          justify-content: flex-end;

          .redBtn {
            background: #d12f1f;
          }

          .redBtn:hover {
            background: #e34f2f;
          }
        }
      }
    }
  }

  .messageTable {
    position: relative;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;

    /* border: 1px solid #EBEEF5; */
    background: #fff;
  }

  /* .table-message{
  padding-top: 20px;
} */
  .addBox {
    width: 100%;
    margin: 10px 0;
    margin-top: 50px;
  }

  .addNews {
    min-width: 92px;
    font-size: 14px;
    color: #d23f1f;
    text-align: center;
    background: none;
    border: 1px solid #d12f1f;
  }

  .addNews:hover {
    min-width: 92px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background: none;
    background: #d23f1f;
  }

  b {
    margin-right: 8px;
    font-size: 16px;
    font-weight: 800;
  }

  .notice {
    padding: 5px 25px 15px;
    margin: 0 0 25px 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  .notice h4 {
    font-weight: 700;
    color: #666;
  }

  .notice span {
    font-size: 14px;
    color: #666;
  }

  .el-input {
    position: relative;
    display: inline-block;
    width: 300px;
  }

  .el-textarea {
    position: relative;
    display: inline-block;
    width: 300px;
    vertical-align: bottom;
  }

  .el-dropdown-link {
    color: #f56c6c;
    cursor: pointer;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .btngroup {
    align-content: flex-end;
    display: flex;
    margin: 0 4px;
    text-align: center;
  }

  label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: normal;
    line-height: 32px;
    text-align: right;
  }

  .search-item {
    display: inline-flex;
  }

  .subSuc {
    text-align: center;
  }

  /* 设置xx条/页的框的颜色 */
  .el-select .el-input.is-focus .el-input__inner,
  .el-pagination__sizes .el-input .el-input__inner:hover,
  .el-select .el-input__inner:focus {
    border-color: #f56c6c;
  }

  /* 设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式 */
  .el-pager li.active,
  .el-pager li:hover,
  .el-pagination button:hover {
    color: #f56c6c;
  }

  /* 设置当前选中的“xx条/页”的样式，是点击以后弹出来的框里的 */
  li.el-select-dropdown__item.selected {
    color: #f56c6c;
  }

  .el-pagination {
    margin-right: 20px;
    font-weight: 700;
    color: #303133;
    white-space: unset;
  }
</style>
